import Vue from "vue";
import VueRouter from "vue-router";
import store from "@/store";
// 使用路由懒加载引入组件 
const Home = () => import("@pages/Home")
const Login = () => import("@pages/Login")
const Register = () => import("@pages/Register")
const Search = () => import("@pages/Search")
const Detail = () => import("@pages/Detail")
const AddCartSuccess = () => import("@pages/AddCartSuccess")
const ShopCart = () => import("@pages/ShopCart")
const Center = () => import("@pages/Center")
const Pay = () => import("@pages/Pay")
const PaySuccess = () => import("@pages/PaySuccess")
const Trade = () => import("@pages/Trade")
const MyOrder = () => import("@/pages/Center/MyOrder")
const TeamOrder = () => import("@/pages/Center/TeamOrder")
//修改push的方法
// 1.先获取VueRouter原型链上的方法push
const beforePush = VueRouter.prototype.push
// 函数接受三个参数 第一个参数是路径 第二,三个参数都采用默认的数据
VueRouter.prototype.push = function (
  location,
  onComplete = () => { },
  onAbort = () => { }
) {
  // 返回的值和原来push的一模一样,只是添加了一个默认值 因为内部需要调用this所以需要修改this
  return beforePush.call(this, location, onComplete, onAbort)
}
// 使用插件
Vue.use(VueRouter)
// 暴漏路由表
const router = new VueRouter({
  scrollBehavior() {
    return {
      x: 0,
      y: 0
    }
  },
  mode: 'history',
  routes: [
    // home组件添加一个元信息 控制它在特定的情况下仍显示不隐藏
    { path: "/home", component: Home, name: "home", meta: { isSearch: true } },
    {
      path: "/login", component: Login, name: "login", meta: { isFooter: true },
      beforeEnter(to, from, next) {
        if (store.state.user.token) {
          next("/home")
        } else {
          next()
        }
      }
    },
    { path: "/register", component: Register, name: "register", meta: { isFooter: true } },
    { path: "/search/:keyword?", component: Search, name: "search" },
    { path: "/detail/:skuId", component: Detail, name: "detail" },
    { path: "/shopCart", component: ShopCart, name: "shopCart" },
    {
      path: "/addCartSuccess", component: AddCartSuccess, name: "addCartSuccess", beforeEnter(to, from, next) {
        if (localStorage.getItem("shopCarData")) {
          next()
        } {
          next('/shopCart')
        }
      }
    },
    {
      path: "/center", component: Center, children: [
        {
          path: "myOrder", component: MyOrder, name: "myOrder",
        },
        {
          path: "teamOrder", component: TeamOrder, name: "teamOrder",
        },
        {
          path: "", redirect: "/center/myOrder",
        },
      ]
    },
    {
      path: "/pay", component: Pay, name: "pay", beforeEnter(to, from, next) {
        if (from.path.startsWith("/trade")) {
          next()
        } else {
          next("/shopCart");
        }
      }
    },
    {
      path: "/paySuccess", component: PaySuccess, name: "paySuccess", beforeEnter(to, from, next) {
        if (from.path.startsWith("/pay")) {
          next()
        } else {
          next("/shopCart");
        }
      }
    },
    {
      path: "/trade", component: Trade, name: "trade", beforeEnter(to, from, next) {
        if (from.path.startsWith("/shopCart")) {
          next()
        } else {
          next("/shopCart");
        }
      }
    },
    // 默认加载组件视口
    { path: '/', redirect: '/home' }
  ]
})
// 全局前置守卫
router.beforeEach((to, from, next) => {
  // to:要去向的路由
  // from:来源
  // next next()放行到他要去的路由
  // 1.拿一个数组用来保存所有有权限限制的路由组件
  const AuthorityPath = ["/center", "/pay", "/paysuccess", "/trade"]
  // 2.判断要去的路由是否有限制
  const isAuthorityPath = AuthorityPath.some(item => to.path.startsWith(item))
  // 3.获取用户名和token
  const token = store.state.user.token
  const nickName = store.state.user.nickName
  // 4.1如果有用户名 说明登录了 去哪都行
  if (nickName) {
    return next()
  }
  // 如果没有用户名 且要去的路由有限制 则进行判断
  if (isAuthorityPath) {
    // 如果有token 就去请求用户名 并跳转
    if (token) {
      try {
        store.dispatch("user/getUserName")
        next()
      } catch (e) {
        next('/login')
      }
    } else {
      // 没有就跳到登录页
      next("/login")
    }
  } else {
    // 如果要去的不需要权限 且你有token 就获取用户名
    if (token) {
      try {
        store.dispatch("user/getUserName")
      } catch (e) {
        next('/login')
      }
    }
    next()
  }
})

export default router